<template>
  <div class="tc_content">
    <mt-header title="确认收货地址">
      <a slot="left">
        <mt-button icon="back" @click="b"></mt-button>
      </a>
    </mt-header>
    <p class="m_search">
      <input type="text" placeholder="学校/教学楼/宿舍" v-model="local"><i class="iconfont icon-search" @click="show(local)"></i>
    </p>
    <div id="container"></div>
    <div class="m_li">
      <ul>
        <li v-for="item in localList" :key="item.id" @click="choosePoint(item)">
          <p><i class="iconfont icon-dingwei"></i>{{item.name}}</p>
          <p>{{item.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<script>
export default {
  data () {
    return {
      local:'',
      map:'',
      localList:[],
      point:'',
    }
  },
  props: {
    showMap: {},
    chooseLocal:Object,
  },
  mounted() {
    this.init();
    this.map.panTo(new qq.maps.LatLng(this.chooseLocal.lat,this.chooseLocal.lng));
  },
  methods: {
    choosePoint(item){
      this.$emit('getLocal',item);
      this.showMap();

    },
    show(local){
      var keyword =local;
            var region = "天津";
            var pageIndex = 0;
            var pageCapacity = 5;

            //根据输入的城市设置搜索范围
      this.searchService.setLocation(region);
                //设置搜索页码
      this.searchService.setPageIndex(pageIndex);
                //设置每页的结果数
      this.searchService.setPageCapacity(pageCapacity);
                //根据输入的关键字在搜索范围内检索
      this.searchService.search(keyword);
    },
    b() {
      this.showMap();
    },
    init(){
        var centerDiv = document.getElementById("centerDiv");
        this.map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标。
            center: new qq.maps.LatLng(39.06552,117.11415),
            zoom:18
        });
        var middleControl = document.createElement("div");
            middleControl.style.left="45vw";
            middleControl.style.top="25vh";
			      middleControl.style.position="relative";
			      middleControl.style.width="36px";
            middleControl.style.height="36px";
			      middleControl.style.zIndex="100000";
            middleControl.innerHTML ='<img src="https://www.cdlhome.com.sg/mobile_assets/images/icon-location.png" />';
          document.getElementById("container").appendChild(middleControl);
          this.point =  this.map.getCenter();

          qq.maps.event.addListener(this.map, 'center_changed', ()=> {
            console.log('center_changed');


            this.point = this.map.getCenter();
            this.geocoder.getAddress(this.point);

            });
        //设置Poi检索服务，用于本地检索、周边检索
        this.searchService = new qq.maps.SearchService({
            //检索成功的回调函数
            complete: (result)=> {

                this.localList = result.detail.pois;
                this.map.panTo(new qq.maps.LatLng(this.localList[0].latLng.lat,this.localList[0].latLng.lng));

            },
            //若服务请求失败，则运行以下函数
            error: function() {
                alert("出错了。");
            }
        });
        // 坐标：
        this.geocoder = new qq.maps.Geocoder({
            complete : (result)=>{
                this.localList = result.detail.nearPois;
            },
            error:function(){
                alert("出错了!");
            }
        });
        this.geocoder.getAddress(this.point);
    }
  },
};
</script>

<style lang="stylus" scoped>
.m_li
  margin 0.1rem
  ul
    max-height 22vh
    overflow auto
    li
      border-bottom 1px solid #f1f1f1
      padding 0.1rem 0
      color #333
      &:first-child
        color #26a2ff
      p
        margin-bottom 0.1rem
        &:first-child
          font-size 0.3rem
          i
            font-size 0.35rem
            padding 0.2rem
        &:last-child
          padding-left 0.7rem
          font-size 0.25rem
          color black
#container
  width 100%
  height 60vh
.tc_content
  position fixed
  height 100vh
  width 100%
  top 0
  left 0
  background #fff
  z-index 3
.m_search
  margin-bottom 0.1rem
  background #f1f1f1
  padding 0.1rem 0.2rem
  display flex
  justify-content space-between
  input
    border-radius 0.1rem
    padding 0.1rem
    width 90%
  i
    float right
    padding 0.1rem
    font-size 0.4rem
    width 9vw
</style>

